import React from 'react'
import { Input, Button, Form, Icon, Checkbox } from "antd"
import { login } from "../../api/index"
import "./login.scss"

export default class Login extends React.Component {
 
  constructor() {

    super()

    this.state = {
      type:"手机号"
    }

  }

  componentWillReceiveProps (props) {
    console.log(props)
    this.setState({
      type:props.type
    })
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      console.log(err)
      if (!err) {
        console.log('ok')
        const phone = values.userName;
        const password = values.password
        login({phone,password}).then(res=>{
          console.log(res)
          localStorage.setItem('id',res.account.id)
          this.props.loginFn(this.state.type,false)
        })
      }
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return <div id="login">

      <div className="main">
      <Form onSubmit={this.handleSubmit} className="login-form">
        <Form.Item>
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: '请输入账号' }],
          })(
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: '请输入密码' }],
          })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true,
          })(
            <Checkbox>记住密码</Checkbox>
          )}
          <Button type="primary" htmlType="submit" className="login-form-button">
            Log in
          </Button>
        </Form.Item>
      </Form>
        
      </div>
    
    </div>
  }
  
}
Login = Form.create({ name: 'normal_login' })(Login);
